<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>幸运开盲盒</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/dayjs.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <script src="/mobile/js/svga.min.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
  }

  #app {
    background: #060241;
    min-height: 100vh;
    box-sizing: border-box;
    color: #fff;
  }
  .top {
    width: 100%;
    height: 88.5333vw;
    background: url(/mobile/img/blind-box-top.jpg) no-repeat center;
    background-size: cover;
  }
  .top-box {
    width: 44.9973vw;
    height: 44.9973vw;
    transform: rotate(-14.76deg) translateX(-50%);
    position: relative;
    left: 50%;
    top: 0;
  }
  .top-box-img {
    width: 44.9973vw;
    height: 44.9973vw;
    position: absolute;
    left: 0;
    top: 0;
    animation: float 1.3s ease-in-out infinite;
  }
  .top-box::before,
  .top-box::after {
    content: '';
    position: absolute;
    top: 40px;
    left: -50%;
    width: 60.137vw;
    height: 22.4596vw;
    border: 2px solid transparent;
    box-sizing: border-box;
    border-radius: 50%;
    color: #fff;
    transform: rotate(35deg) translateX(25%);
  }
  .top-box::before {
    border-top-color: currentColor;
    border-right-color: currentColor;
    z-index: -1;
  }

  .top-box::after {
    border-bottom-color: currentColor;
    border-left-color: currentColor;
  }
  @keyframes float {
    0% {
      top: 30px;
    }
    50% {
      top: 20px;
    }
    100% {
      top: 30px;
    }
  }
  .box-ring {
    width: 55.4666vw;
    height: 55.4666vw;
    transform: rotate(-9deg) translateX(-53%);
    position: absolute;
    left: 50%;
    top: 20px;
    clip-path: polygon(0% 0%, 105% 65%, 50% 150%, 0% 50%);
  }
  .container {
    padding: 0 10px 45px;
  }
  .box {
    border: 2px solid #7138ff;
    border-radius: 10px;
    padding: 22px 0;
  }
  .title {
    text-align: center;
    position: relative;
  }
  .title-img {
    width: 38.4vw;
    position: relative;
    z-index: 2;
  }
  .title-2 {
    width: 44.2667vw;
  }
  .title-bg {
    width: 100%;
    height: 19.1549vw;
    background: url(/mobile/img/box-top-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -24px;
    left: 0;
    z-index: 1;
  }
  .content {
    padding: 13px 20px;
    font-size: 12px;
    color: #C1C1FF;
    line-height: 1.5;
  }
  .box-before {
    font-size: 0;
    padding: 0 6.9333vw;
    display: flex;
    justify-content: space-between;
  }
  .before-icon {
    width: 13px;
    height: 15px;
  }
  .table {
    margin: 12px;
    border: 1px solid #5C2DD6;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
  }
  .table-header {
    font-size: 14px;
    color: rgba(255, 255, 255, .6);
    background: #5C2DD6;
    display: flex;
    line-height: 12.5333vw;
  }
  .table-body-row {
    display: flex;
    line-height: 12.5333vw;
    font-size: 12px;
    border-bottom: 1px solid #3A1896;
    background: #210172;
  }
  .t-name {
    width: 36.8vw;
    border-right: 1px solid #3A1896;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .t-name img {
    width: 9.6vw;
    height: 9.6vw;
    margin-right: 8px;
  }
  .t-shell {
    width: 25.0666vw;
    border-right: 1px solid #3A1896;
  }
  .t-shell img {
    width: 3.2vw;
    height: 3.2vw;
    margin-right: 3px;
  }
  .t-odds {
    width: 25.0666vw;
  }
  .avatar-box {
    text-align: center;
    margin-top: 46px;
  }
  .avatar-img-box {
    display: inline-block;
    position: relative;
    font-size: 0;
  }
  .avatar-tag {
    width: 16.8vw;
    position: absolute;
    top: 0;
    right: -6.4vw;
  }
  .avatar-name {
    font-size: 12px;
  }
  .avatar-content {
    padding: 0 30px;
    text-align: center;
    margin-top: 24px;
  }
  .last {
    padding-bottom: 45px;
  }
  .ring-content:before {
    content: '';
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 38px;
    z-index: 3;
    background: linear-gradient(270deg, #9358F4 0%, #fff 100%);
  }
  .ring-content:after {
    content: '';
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    right: 40px;
    bottom: -20px;
    z-index: 3;
    background: linear-gradient(270deg, #9358F4 0%, #fff 100%);
  }

  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="top">
      <!-- <div class="top-box">
        <img v-if="icon" class="top-box-img" :src="icon" alt="">
      </div> -->
      <div class="top-box">
        <div class="ring-content">
          <img v-if="icon" class="top-box-img" :src="icon" alt="">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="box-before">
      <img class="before-icon" src="/mobile/img/box-before.png" alt="">
      <img class="before-icon" src="/mobile/img/box-before.png" alt="">
    </div>
      <div class="box">
        <div class="title">
          <img class="title-img" src="/mobile/img/box-title-1.png" alt="">
          <div class="title-bg"></div>
        </div>
        <div class="content">
          1.每{{coin}}贝壳送出{{name}}盲盒一个，用户赠送该盲盒后可开出不同礼物，开出礼物将会自动赠送给所指定的麦上主播。<br>
          2.用户在赠送{{name}}盲盒后可获得专属头像框-礼物盒1天。
        </div>
      </div>
      <div class="box-before">
        <img class="before-icon" src="/mobile/img/box-before.png" alt="">
        <img class="before-icon" src="/mobile/img/box-before.png" alt="">
      </div>
      <div class="box">
        <div class="title">
          <img class="title-img title-2" src="/mobile/img/box-title-2.png" alt="">
          <div class="title-bg"></div>
        </div>
        <div class="table">
          <div class="table-header">
            <div class="t-name">礼物名称</div>
            <div class="t-shell">贝壳</div>
            <div class="t-odds">概率</div>
          </div>
          <div class="table-body">
            <div class="table-body-row" v-for="(item, index) in giftList" :key="index">
              <div class="t-name">
                <img :src="item.giftIcon" alt="">
                <span>{{item.giftName}}</span>
              </div>
              <div class="t-shell">
                <img src="/mobile/img/recharge-shell.png" alt="">
                <span>{{item.needCoin}}</span>
              </div>
              <div class="t-odds">{{item.rate}}</div>
            </div>
          </div>
        </div>
        <div class="avatar-box">
          <div class="avatar-img-box">
            <canvas id="avatar" width="160" height="160"></canvas>
            <img src="/mobile/img/box-avatar-tag.png" alt="" class="avatar-tag">
          </div>
          <div class="avatar-name">礼物盒</div>
        </div>
        <div class="content avatar-content">获得头像框后，您可以在我的-装扮中心-头像框中佩戴礼物盒专属头像框。</div>
      </div>
      <div class="box-before">
        <img class="before-icon" src="/mobile/img/box-before.png" alt="">
        <img class="before-icon" src="/mobile/img/box-before.png" alt="">
      </div>
      <div class="box">
        <div class="title">
          <img class="title-img" src="/mobile/img/box-title-3.png" alt="">
          <div class="title-bg"></div>
        </div>
        <div class="content">
          1.用户通过该玩法获得的礼盒礼物仅限于在平台内使用，不得以任何形式兑换成法定货币、现金或其他任何具有交换价值的物品或服务。 <br>
          2.禁止主持、用户及其他第三方主体进行任何形式的礼物交易，否则一经查实，平台将严格按照平台规则对主持、用户采取包括但不限于封号、冻结交易、清空违规资产、终止服务等处罚措施，平台亦不保障前述交易的道具、权益及虚拟财产的有效性，主持、用户应自行承担法律责任及相关损失。请用户谨防上当受骗。 <br>3.平台可能在聊天室展示用户账号信息及所获的随机礼物等信息，您授权并同意平台为此使用并展示您的公开账号信息(如头像、昵称等)及所获得的随机礼物等信息。
        </div>
      </div>
      <div class="box-before">
        <img class="before-icon" src="/mobile/img/box-before.png" alt="">
        <img class="before-icon" src="/mobile/img/box-before.png" alt="">
      </div>
      <div class="box">
        <div class="title">
          <img class="title-img" src="/mobile/img/box-title-4.png" alt="">
          <div class="title-bg"></div>
        </div>
        <div class="content">
          1.该玩法禁止未成年人参加，请适度参与，勿沉迷其中。 <br>2.本玩法旨在提升用户互动体验，仅供交流娱乐的目的。主持、用户及其他任何主体均不与任何非法目的与方式进行使为。 <br>
          3.禁止将获取的礼物实施任何影响互动公平性的行为，或利用产品BUG、使用外挂、插件、模拟器等不正当手法参与互动，一旦发生上述情况平台有权取消发放对应奖励，追回奖励，对情节严重的，平台保留一切追究法律责任的权利。 <br>
          4.对同一账号、同一手机号、同一设备或同一个体现账户均视为同一个用户，仅可获得参与活动资格。消费过程中申请用户妥善保管好自己的账号、密码、手机验证码等登陆凭证 。 <br>
          5.活动期间，因用户操作不当或用户所在地网络、支付平台电信运营商、第三方平台等故障或限制导致的用户无法参与活动或参与失败的，平台无需为此承担任何法律责任。 <br>
          6.如因不可抗力、情势变更、相关政策变动、政府机关指令等原因导致本功能玩法调整、暂停、或无法进行的，平台有权随时决定修改、暂停、取消或终止本功能玩法，并无需为此承担任何法律责任。 <br>
          7.活动最终解释权归贝贝语音所有。
        </div>
      </div>
    </div>
    
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      id: '',
      coin: '',
      name: '',
      icon: '',
      avatar: 'https://oss.zgbbyy.com/userbox/b19d5a38741b4a2bbd96bb751e0e019d.png',
      giftList: []
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      var data = parse(location.search)
      if (data.id) {
        this.id = data.id
        this.getData()
      }
    },
    mounted () {
      var player = new SVGA.Player('#avatar');
      var parser = new SVGA.Parser('#avatar'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
      parser.load('https://oss.zgbbyy.com/userbox/70cd91d36ccc40e9836f8e5ba1d91f35.svga', function(videoItem) {
        player.setVideoItem(videoItem);
        player.startAnimation();
      })
    },
    methods: {
      getData() {
        var query = `id=${this.id}`
        var str = ISCRYPT ? `args=${encrypt(query)}` : query
        request.get(`/api/business/manage/blind/box/detail?${str}`).then(res => {
          console.log(res)
          this.name = res.data.name
          this.icon = res.data.icon
          this.coin = res.data.coin
          this.giftList = res.data.giftList
        })
        // new SVGA.autoload(document.querySelector('#avatar'))
      },
    }
  })
  </script>
</body>

</html>